<template>
    <h1>增删改查案例</h1>
    <div>
        <!--查询条件  -->
        <el-form :model="searchData" label-width="40px" :inline="true">
            <el-form-item label="书号">
                <el-input v-model="searchData.id" />
            </el-form-item>
            <el-form-item label="书名">
                <el-input v-model="searchData.name" />
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="searchData.author" />
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="searchData.minprice" />
            </el-form-item>
            <el-form-item label="-->">
                <el-input v-model="searchData.maxprice" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchFn">查询</el-button>
                <el-button @click="showAdd">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div>
        <!-- 书籍列表 -->
        <el-table :data="bookData" stripe style="width: 100%">
            <el-table-column prop="id" label="书号" width="180" />
            <el-table-column prop="name" label="书名" width="180" />
            <el-table-column prop="author" label="作者" />
            <el-table-column prop="price" label="价格" />
            <el-table-column  label="类型" >
                <template #default="scope">
                    <span>{{typeObj[scope.row.type]}}</span>
                </template>
            </el-table-column>
            <el-table-column label="图片">
                <template #default="scope">
                    <img :src="scope.row.img" style="width: 100px;height: 100px" />
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="showEdit(scope.row.id)">
                        编辑
                    </el-button>
                    <el-button link type="primary" size="small" @click.prevent="deleteBook(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer v-model="drawer" title="添加书籍" direction="rtl" :before-close="handleClose">
            <AddBook @close="closeFn" @ok="okFn"></AddBook>
        </el-drawer>
        <el-drawer v-model="drawerEdit" title="修改书籍" direction="rtl" >
            <EditBook :id="editId" @ok="editOkFn" @close="editCloseFn" ></EditBook>
        </el-drawer>
    </div>
</template>

<script  setup>
import { reactive, onMounted,ref } from "vue";
import { getBooksApi, getBooksByCondationApi, deleteBookApi } from "@/api/crud";
import AddBook from "./Add.vue";
import EditBook from "./edit.vue";


const typeObj = {
    "new":"最新",
    "hot":"热卖"
}


// 书籍数据
let bookData = reactive([]);

//一、 获取书籍信息
const getBooks = () => {
    getBooksApi()
        .then(res => {
            if (res.data) {
                console.log("bookData前", bookData);
                // bookData = res.data;
                bookData.length = 0;
                bookData.push(...res.data);
                console.log("bookData后", bookData);
            }
        })
        .catch(err => {
            console.log("获取数据出错", err);
        })
}
onMounted(() => {
    getBooks();
})

// 二、查询书籍
const searchData = reactive({
    "id": "",
    "name": "",
    "author": "",
    "minprice": "",
    "maxprice": ""
})

const searchFn = () => {

    const temp = {};
    for (const key in searchData) {
        if (searchData[key] !== "") {
            temp[key] = searchData[key];
        }
    }

    if (temp["minprice"]) {
        delete temp["minprice"];
        temp["price_gte"] = searchData.minprice;
    }

    if (temp["maxprice"]) {
        delete temp["maxprice"];
        temp["price_lte"] = searchData.maxprice;
    }


    getBooksByCondationApi(temp)
        .then(res => {
            if (res.data) {
                bookData.length = 0;
                bookData.push(...res.data);
            }
        })
}


// 三、删除书籍
const deleteBook = (id) => {

    deleteBookApi(id)
        .then(res => {
            console.log("删除的返回res", res);
            // 删除成功后，重新获取数据
            getBooks();
        })
}


// 四、添加
const drawer = ref(false)

const handleClose = (done) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

// 显示添加页面
const showAdd=()=>{
    drawer.value=true;
}

const closeFn=()=>{
    drawer.value = false;
}

const okFn=()=>{
    closeFn();
    getBooks();
}

// 五、修改
const drawerEdit = ref(false);
const editId = ref("");//修改的书籍的id

// 显示修改页面
const showEdit=(id)=>{
    editId.value=id;
    drawerEdit.value=true;
}

const editCloseFn=()=>{
    editId.value ="";
    drawerEdit.value = false;
}

const editOkFn=()=>{
    editCloseFn();
    getBooks();
}


</script>


<style lang="css" scoped></style>
